$(function(){
    "use strict";
    $.ajax({
        url:'/Admin/BookCourse/getBooks',
        type:'get',
        success:function(data){
            let htmls = ''
            for(let i = 0; i < data.length; i++){
                if(i==0){
                    htmls += `
                        <tr data-index="${data[i].id}">
                            <td>${data[i].cost_sn}</td>
                            <td>${data[i].cost_name}</td>
                            <td class="need_edit">
                                <span class="active">${data[i].course_code}</span>
                                <div class="edit_name_box">
                                    <input type="text" value="${data[i].course_code}" class="">
                                </div>
                            </td>
                            <td class="need_edit">
                                <span class="active">${data[i].course_name}</span>
                                <div class="edit_name_box">
                                    <input type="text" value="${data[i].course_name}">
                                    <i class="iconfont icon-jia add"></i>
                                </div>
                            </td>
                        </tr>
                    `
                }else{
                    if(data[i].cost_sn!=data[i-1].cost_sn){
                        htmls += `
                            <tr data-index="${data[i].id}">
                                <td>${data[i].cost_sn}</td>
                                <td>${data[i].cost_name}</td>
                                <td class="need_edit">
                                    <span class="active">${data[i].course_code}</span>
                                    <div class="edit_name_box">
                                        <input type="text" value="${data[i].course_code}" class="">
                                    </div>
                                </td>
                                <td class="need_edit">
                                    <span class="active">${data[i].course_name}</span>
                                    <div class="edit_name_box">
                                        <input type="text" value="${data[i].course_name}">
                                        <i class="iconfont icon-jia add"></i>
                                    </div>
                                </td>
                            </tr>
                        `
                    }else if(data[i].cost_sn==data[i-1].cost_sn){
                        htmls += `
                            <tr data-index="${data[i].id}">
                                <td>${data[i].cost_sn}</td>
                                <td>${data[i].cost_name}</td>
                                <td class="need_edit">
                                    <span class="active">${data[i].course_code}</span>
                                    <div class="edit_name_box">
                                        <input type="text" value="${data[i].course_code}" class="">
                                    </div>
                                </td>
                                <td class="need_edit">
                                    <span class="active">${data[i].course_name}</span>
                                    <div class="edit_name_box">
                                        <input type="text" value="${data[i].course_name}">
                                        <i class="iconfont icon-jian2 add"></i>
                                    </div>
                                </td>
                            </tr>
                        `
                    }
                }

            }
            $('#table_table').find('tbody').html(htmls)
        }
    })

    //编辑和显示
    $('.edit_operation_btn>a').click(function(e){
        // console.log('编辑和显示')
        if($(this).html()=='编辑'){
            $('#table_table .need_edit>span').removeClass('active')
            $('#table_table .edit_name_box').addClass('active')
            $(this).html('保存')

        }else{
            let valueLen = $('#table_table tbody').find('.edit_name_box').children('input')

            let data = []
            let alltr = $('#table_table tbody').children('[data-index]')
            for(let tri = 0; tri < alltr.length; tri++){
                let obj = {}
                let tr_input = $(alltr[tri]).find('input')
                let bid = $(alltr[tri]).attr('data-index')
                // let hidetr = $(alltr[tri]).next().find('input')
                obj.bid = bid
                obj.course_code = $(tr_input[0]).val()
                obj.course_name = $(tr_input[1]).val()
                // obj.rel_name = $(hidetr[0]).val()
                // obj.rel_sn = $(hidetr[1]).val()
                data.push(obj)
            }
            let that = this
            $.ajax({
                url:'/Admin/BookCourse/editBooks',
                type:'post',
                data:{
                    books:data
                },
                success:function(data){
                    // console.log(data)
                    if(data.code==1){
                        for(var k=0;k<valueLen.length;k++){
                            $(valueLen[k]).parent().siblings('span').html(valueLen[k].value)
                        }
                        $('#table_table tbody').find('.need_edit>span').addClass('active')
                        $('#table_table tbody').find('.edit_name_box').removeClass('active')
                        $(that).html('编辑')
                        $('#table_table tbody').find('tr:not([data-index])').addClass('hide')
                    }
                }
            })
            // }
        }
    })
    //增加一行
    $('#table_table').on('click','.edit_name_box>i.add',function(e){
        e.stopPropagation()
        let parent = $(this).parent().parent().parent()
        // let parent_next = $(this).parent().parent().parent().next()
        if($(this).hasClass('icon-jia')){

            let parent_id = parent.attr('data-index')
            let td_len = $(this).closest('tr').find('td')
            for(var i=0;i<td_len.length;i++){
                var num = $(td_len[0]).html()
                var name = $(td_len[1]).html()
            }
            let html = `
            <tr data-index="${parent_id}">
                <td>${num}</td>
                <td>${name}</td>
                <td class="need_edit">
                    <span></span>
                    <div class="edit_name_box active">
                        <input type="text" value="">
                    </div>
                </td>
                <td class="need_edit">
                    <span></span>
                    <div class="edit_name_box active">
                        <input type="text" value="">
                        <i class="iconfont icon-jian2 add"></i>
                    </div>
                </td>
            </tr>
        `
            parent.after(html)
        }else{
            parent.remove()
            // parent_next.remove()
        }

    })

    //显示下面更多的一行tr填写关联型号和名称
    // $('#table_table').on('click','.edit_name_box>i.other',function(e){
    //     if($(this).closest('tr').next('tr').hasClass('hide')){
    //         $(this).closest('tr').next('tr').removeClass('hide')
    //     }else{
    //         $(this).closest('tr').next('tr').addClass('hide')
    //     }
    // })
    // 弹出来的小框框
    function tipShow(){
        window.tipBox = setTimeout(function(){
            // $('#yz_modal').removeClass('active')
            // $('#yz_modal').addClass('fadeOut')
            $('#yz_modal').removeClass('active')
            clearTimeout(tipBox)
        },2000)
    }
})